<template>
  <div>
    <h2>当前记数：{{sum}}</h2>
    <button @click="sum++">记数加1</button>
  </div>
</template>

<script>
import {ref,  reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, } from 'vue';
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0)
    console.log("--------setup---------")

    onBeforeMount(() => {
      console.log("--------onBeforeMount---------")
    })
    onMounted(() => {
      console.log("--------onMounted---------")
    })
    onBeforeUpdate(() => {
      console.log("--------onBeforeUpdate---------")
    })
    onUpdated(() => {
      console.log("--------onUpdated---------")
    })
    onBeforeUnmount(() => {
      console.log("--------onUnmounted---------")
    })
    onUnmounted(() => {
      console.log("--------onMounted---------")
    })

    return{
      sum
    }
  },
  //通过配置项的形式使用生命周期钩子
	//#region 
  beforeCreate(){
    console.log("--------beforeCreate---------")
  },
  created(){
    console.log("--------created---------")
  },
  beforeMount(){
    console.log("--------beforeMount---------")
  },
  mounted(){
    console.log("--------mounted---------")
  },
  beforeUpdate(){
    console.log("--------beforeUpdate---------")
  },
  updated(){
    console.log("--------updated---------")
  },
  // beforeDestroy(){
  //   console.log("--------beforeDestroy---------")
  // }, vue2的beforeDestroy改成beforeUnmount
  // destroyed(){
  //   console.log("--------destroyed---------")
  // }, vue2的destroyed改成unmounted
  beforeUnmount(){
    console.log("--------beforeUnmount---------")
  },
  unmounted(){
    console.log("--------unmounted---------")
  },
  //#endregion
}
</script>

<style>

</style>
